<template>
    <div>
        <el-form ref="form" :model="curData" label-width="100px" :inline="true" :rules="rules" status-icon>
            <el-form-item label="父类:" prop="parentId" size="small">
                <el-select-tree
                    clearable
                    default-expand-all
                    checkStrictly
                    placeholder="请选择父类"
                    :popover-min-width="200"
                    :data="deptTrees"
                    v-model="curData.parentId"
                    @change="handleChange"
                ></el-select-tree>
            </el-form-item>
            <el-form-item label="部门类型:" prop="type">
                <el-select v-model="curData.type" placeholder="请选择部门类型" size="small" clearable>
                    <el-option v-for="(item,index) in customDeptTypes" :label="item.label" :value="+item.value"
                               :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称:" prop="deptName">
                <el-input v-model.trim="curData.deptName" placeholder="请输入名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="sort" size="small">
                <el-input v-model.number.trim="curData.sort" placeholder="请输入排序" size="small"></el-input>
            </el-form-item>
            <el-col :span="24">
                <el-form-item label="备注:" prop="remark" size="small" class="formBlock">
                    <el-input v-model.trim="curData.remark" size="small" type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4}"
                              maxlength="30"
                              show-word-limit></el-input>
                </el-form-item>
            </el-col>

            <el-form-item class="formBtn">
                <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
                <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import DialogView from '@/components/dialogView'
    import edtiMixin from '@/mixins/edit.mixin'
    import rules from './rules';
    import {mapState, mapActions} from 'vuex'
    export default {
        mixins: [edtiMixin],
        data() {
            return {
                rules: rules(this),
                addApi: this.$api.system.dept.add,
                editApi: this.$api.system.dept.edit,
                customDeptTypes: []
            }
        },
        computed: {
            ...mapState('basic', ['deptTrees']),
            ...mapState('dic', ['enableds','deptTypes'])
        },
        methods: {
            ...mapActions('basic', ['doDeptTreeOfBasic']),
            ...mapActions('dic', ['doEnabledOfBasic','doDeptTypesOfBasic']),
            handleChange(val) {
                this.customDeptTypes = [];
                this.getDeptTypes(val);
            },
            async getDeptTypes(val) {
                let dept={};
                await this.$ajax.get(this.$api.system.dept.get,{id:val}).then(result => {
                    dept = {...result.bean};
                })
                await this.doDeptTypesOfBasic().then(result => {
                    for(let i = 0;i < this.deptTypes.length;i++) {
                        if(this.deptTypes[i].value == dept.type) {
                            this.customDeptTypes.push(this.deptTypes[i]);
                            if(i+1 < this.deptTypes.length) {
                                this.customDeptTypes.push(this.deptTypes[i+1]);
                            }
                            return;
                        }
                    }
                });
            }
        },
        mounted() {
            this.doDeptTreeOfBasic();
            this.doEnabledOfBasic();
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/common.less";

    /deep/ .el-select-tree {
        width:200px!important;
    }

</style>
